<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<script>
var colorSet = new Set();
function searchColors(){	
		var colorS = $("#colorInfo").val();

        $('#dataGridColor').datagrid({
    		url : 'productJSONAction!listColorsDataByPage',    		
    	    queryParams: {
    	    	'formBean.colorName':colorS,    	    	
    	    },
    		fit : true,
    		fitColumns : true,
    		pagination : true,
    		pageSize : 50,
    		pageList : [ 50, 100],
    		border : false,
    		checkOnSelect : true,
    		selectOnCheck : true,
    		singleSelect: false,
    		showFooter:true,
    		rownumbers:true,
    		nowrap : false,
    		columns : [[
    					{field:'colorId', width:60,title:'选择',checkbox: true},	
    				
    					{field:'code', width:80,title:'颜色编码',fixed:true},	
						{field:'name', width:100,title:'颜色名称',fixed:true},					
						{				
							field : 'action',
							title : '选择',
							width : 30,
						formatter : function(value, row, index) {							
							var str = '';
							str += $.formatString('<a href="#" onclick="selectColor(\'{0}\',\'{1}\');"><img border="0" src="{2}" title="颜色"/></a>', row.colorId,row.name,'<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/select.png');
							return str;
						}},
    			     ]],	    
    	});
        
        $("#colorDiv").dialog("open");
}
//选中颜色
function selectColor(colorId,colorName){

	var colors = $("#colors").val();
	if(colors != null && colors != ""){
		colors += ","+colorId;
		$("#colors").val(colors);
	}else{
		$("#colors").val(colorId);
	}
	colorSet.add(colorId);
	//已选颜色数量信息
	let colorNums = colorSet.size;	
	$("#colorNums").val(colorNums);
	 $.messager.show({
         title:'选择颜色提示',
         msg:colorName +'颜色加入已选颜色',
         showType:'slide',
         timeout:100,
         style:{
        	 left:'',
             right:0,
             top:document.body.scrollTop+document.documentElement.scrollTop,
             bottom:''
         }
     });
	$("#colorDiv").dialog("close");
	
}
//查看已选颜色
function searchFilterColors(){
	
	var colors = $("#colors").val();
    $('#colorGrid').datagrid({
		url : 'productJSONAction!listColorsData',    		
	    queryParams: {
	    	'formBean.colors':colors,    	    	
	    },
		fit : true,
		fitColumns : true,
		border : false,
		checkOnSelect : false,
		selectOnCheck : false,
		singleSelect:true,
		rownumbers:true,
		nowrap : false,
		columns : [[
					{field:'colorId', width:30,title:'颜色ID'},	
					
					{field:'code', width:120,title:'颜色编码',fixed:true},	
					{field:'name', width:160,title:'颜色名称',fixed:true},					
					{				
						field : 'action',
						title : '选择',
						width : 60,
					formatter : function(value, row, index) {							
						var str = '';
						str += $.formatString('<a href="#" onclick="selectColor(\'{0}\',\'{1}\');"><img border="0" src="{2}" title="颜色"/></a>', row.colorId,row.name,'<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/delete2.png');
						return str;
					}},
			     ]],

	});
	$('#selectColorDiv').dialog('open')
}
//根据颜色ID删除已选颜色
function deleteColor(colorId){
	colorSet.delete(colorId);
	var colorIds = "";
	colorSet.values().forEach(item => {
		colorIds += item + ","
	    });
	if(colorIds.length>1){
		colorIds = colorIds.substr(0,colorIds.length-1);
	}
	$("#colors").val(colorIds);
	let colorNums = colorSet.size;	
	$("#colorNums").val(colorNums);
	searchFilterColors();	
}
//清空已选颜色
function deleteColors(){
	$("#colors").val('');
	colorSet.clear();
	$("#colorNums").val(0);
	searchFilterColors();
	$('#selectColorDiv').dialog('close')
}

//所有checkbox 选中的颜色
function selectColors(){
	
	var rows = $('#dataGridColor').datagrid('getChecked');
	
	if(rows.length != 0){
		for(let i = 0;i<rows.length;i++){
			var colors = $("#colors").val();
			let colorId = String(rows[i].colorId);
			if(colors != null && colors != ""){
				colors += ","+colorId;				
			}else{
				colors += colorId;	
			}
			$("#colors").val(colors);			

			colorSet.add(colorId);
			//已选颜色数量信息
			let colorNums = colorSet.size;				
			$("#colorNums").val(colorNums);
		}
	}
	$("#colorDiv").dialog("close");
}

</script>

<s:form id="colorForm" name="colorForm" action="" theme="simple" method="POST">

	<table  border="0"  class="InnerTableContent">
		<tr>
			<td width="70" align="left"><strong>产品颜色：</strong></td>
			<td width="190"><s:textfield cssClass="easyui-searchbox" id="colorInfo" data-options="prompt:'颜色名称',searcher:searchColors"  size="25" /></td>							
			<td width="90" >
				<a onclick="searchFilterColors();" href="javascript:void(0);" class="easyui-linkbutton c8" style="height:25px;" data-options="iconCls:'icon-filter'">已选颜色</a>
			</td>
			<td width="20" >	<input type="button" id="colorNums" style="height:25px;width:28px;color:red;text-align:center;border-radius:30%"  disabled="disabled">
			</td>
		</tr>
		</table>

</s:form>
<input type="hidden" id="colors" name="formBean.colors"/>
<!-- 查找颜色 -->
<div id="colorDiv" class="easyui-dialog" style="width: 400px; height: 570px" data-options="title:'查找颜色',modal:false,closed:true,resizable:true">	
			<a onclick="selectColors();" href="javascript:void(0);" class="easyui-linkbutton c5" style="height:25px;" data-options="">确认选择</a>
		    <div id="cc" class="easyui-layout" style="width:390px;height:560px; position: relative; top:5px;">
		    
		    	<table id="dataGridColor" border="0" >
				</table>
		    </div>


</div>
<!-- 已选颜色 -->
<div id="selectColorDiv" class="easyui-dialog" style="width: 400px; height: 570px" data-options="title:'已选颜色',modal:false,closed:true,resizable:true">

<a onclick="deleteColors();" href="javascript:void(0);" class="easyui-linkbutton c5" style="height:25px;" data-options="">一键清空</a>
	<table id="colorGrid"  border="0">
	</table>
</div>